<template>
  <div>
    <!-- 轮播图 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <mt-swipe :auto="4000">
            <mt-swipe-item>1</mt-swipe-item>
            <mt-swipe-item>2</mt-swipe-item>
            <mt-swipe-item>3</mt-swipe-item>
          </mt-swipe>
        </div>
      </div>
    </div>
    <!-- 商品购买 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <mt-button type="primary" size="large" @click="buygoods"
            >购买</mt-button
          >
        </div>
      </div>
    </div>
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="goodsId"
      :quota="quota"
      :quota-used="quotaUsed"
      :hide-stock="sku.hide_stock"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
    />
    <!-- 小球 -->
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
    >
      <div class="diaglog" v-show="flag"></div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: false,
      id: this.$route.params.id,
      show: false,
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: '颜色', // skuKeyName：规格类目名称
            k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            k_id: 1,
            v: [
              {
                id: '30349', // skuValueId：规格值 id
                name: '红色', // skuValueName：规格值名称
                imgUrl: 'https://img01.yzcdn.cn/2.jpg', // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl: 'https://img01.yzcdn.cn/2.jpg' // 用于预览显示的规格类目图片
              },
              {
                id: '1215',
                name: '蓝色',
                imgUrl: 'https://img01.yzcdn.cn/2.jpg',
                previewImgUrl: 'https://img01.yzcdn.cn/2.jpg'
              }
            ],
            largeImageMode: true //  是否展示大图模式
          },
          // 尺寸类目
          {
            k: '尺寸', // skuKeyName：规格类目名称
            k_s: 's2', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            k_id: 2,
            v: [
              {
                id: '1193', // skuValueId：规格值 id
                name: '大' // skuValueName：规格值名称
              },
              {
                id: '1194',
                name: '小'
              }
            ]
          }
        ],

        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: 2259,
            price: 120, // 价格
            discount: 122,
            s1: '1215',
            s2: '1193',
            s3: '0',
            s4: '0',
            s5: '0',
            stock_num: 20, // 库存
            goods_id: 946755
          },
          {
            id: 2260,
            price: 110,
            discount: 112,
            s1: '1215',
            s2: '1194',
            s3: '0',
            s4: '0',
            s5: '0',
            stock_num: 2, // 库存
            goods_id: 946755
          },
          {
            id: 2257,
            price: 130,
            discount: 132,
            s1: '30349',
            s2: '1193',
            s3: '0',
            s4: '0',
            s5: '0',
            stock_num: 40, // 库存
            goods_id: 946755
          },
          {
            id: 2258,
            price: 100,
            discount: 100,
            s1: '30349',
            s2: '1194',
            s3: '0',
            s4: '0',
            s5: '0',
            stock_num: 50, // 库存
            goods_id: 946755
          }
        ],
        price: '1.00', // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        hide_stock: false // 是否隐藏剩余库存
      },
      goods: {
        picture: 'https://img01.yzcdn.cn/2.jpg'
      },
      goodsId: this.$route.params.id,
      quota: 0, // 限购数
      quotaUsed: 0
    }
  },
  methods: {
    // 点击购买回调
    onBuyClicked(skuData) {
      console.log(skuData)
    },
    // 点击加入购物车回调
    onAddCartClicked(skuData) {
      skuData.value = false
      console.log(skuData)
      this.$store.commit('incrementshop', skuData)
      this.flag = true
      this.show = false
    },
    // 点击购买商品
    buygoods() {
      this.show = true
    },
    beforeEnter(el) {
      el.style.transform = 'translate(0, 0)'
    },
    enter(el, done) {
      const ballplace = document.querySelector('.mint-swipe')
      console.log(ballplace.clientTop)
      console.log(ballplace.offsetLeft)

      const shopplace = document.querySelector('#buys')
      console.log(shopplace.getBoundingClientRect().top)
      var yend =
        shopplace.getBoundingClientRect().top -
        ballplace.getBoundingClientRect().top
      var xend =
        shopplace.getBoundingClientRect().left -
        ballplace.getBoundingClientRect().left

      el.offsetWidth // 这个必须写才有动画
      el.style.transform = `translate(${xend}px, ${yend}px)`
      el.style.transition = 'all 1s cubic-bezier(.4,-0.3,1,.68)'
      done()
    },
    afterEnter(el) {
      this.flag = !this.flag
    }
  }
}
</script>

<style lang="less" scoped>
.mint-swipe {
  height: 200px;
  .mint-swipe-item {
    &:nth-child(1) {
      background-color: red;
    }
    &:nth-child(2) {
      background-color: yellow;
    }
    &:nth-child(3) {
      background-color: skyblue;
    }
  }
}
.diaglog {
  position: absolute;
  top: 5%;
  left: 5%;
  z-index: 999 !important;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: red;
}
</style>
